<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <div id="app">
    <cpn1></cpn1>
   <cpn1></cpn1>
   <cpn1></cpn1>
  </div>
 <template id="cpn1">
   <div>
     <h2>当前计数:{{counter}}</h2>
     <button @click="decClick">-</button>
     <button @click="incClick">+</button>
   </div>
 </template>

     <script src="../js/vue.js"></script>
     <script>
       //因为cpn1的多个组件的数据是独立的   data 必须就是一个函数 ，如果是一个对象，那个多个组件是会相互影响的，
       Vue.component('cpn1',{
         template:'#cpn1',
         data(){
           //如果希望多个组件共享数据 这个地方直接返回一个 const 定义的对象即可
           return {
             counter: 0
           }
         },
         methods:{
           decClick(){
             this.counter--;
           },
           incClick(){
             this.counter++;
           }
         }
       })
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
         }
       })
     </script>
</body>
</html>